<script setup lang="ts">
import ApiActivity from '@/api/activity';
import ByRadio from '@/components/ui/ByRadio.vue';
import { TStall } from '@/global';
import useList from '@/hooks/useList';
import { computed } from 'vue';

const { actId: act_id, disabled } = defineProps<{

    actId: number;

    disabled?: boolean;
    merchantID?: number;
}>();

const model = defineModel();

const handleChange = (e) => {
    model.value = +e.detail.value;
};


const { list } = useList<TStall>(ApiActivity.standList, { search: { act_id } });


const showList = computed(() => {
    const id = model.value;
    // 是否禁用（不可编辑了）? 仅展示已选中的 : 展示所有【is_show==0】的
    return list.value?.filter((e) => disabled ? e.id == id : e.is_show == 0) || [];
});
</script>

<template>

    <radio-group @change="handleChange">
        <template v-for="(item, index) in showList" :key="item.id">
            <view :class="['flex', index != 0 && 'mt-5']">
                <ByRadio v-if="!disabled"
                         :value="item.id"
                         :model-value="item.id == model"
                         color="#fff"
                         class="mr-2" />
                <view>
                    <view class="text-white font-bold">{{ item.stand_title }}</view>
                    <view class="text-sm mt-1 text-dark whitespace-pre-line">{{ item.stand_desc }}</view>
                </view>
            </view>
        </template>
    </radio-group>

</template>